<script setup lang="ts">
import type { UniLoadMoreStatus } from '@uni-helper/uni-ui-types'
import type { Dynamic } from '@/common/types/dynamic'
import { useLayoutInfo } from '@/common/composables/useLayoutInfo'
import { getPagedActivityService } from '@/common/service/dynamic'
import type { PagedParams } from '@/common/types/request'
import { NavigateItem, PageTitle } from '@/common/constants'
import skeleton from '@/common/skeleton/pages/dynamic.vue'

const dynamic = ref<Dynamic[]>([])

const { contentAreaHeight, tabBarHeight } = useLayoutInfo()

/**
 * 分页参数
 */
const pagedParams = ref<PagedParams>({
  pageNum: 1,
  pageSize: 5,
})

/**
 * 总数量
 */
const total = ref<number>(0)

/**
 * 加载状态
 */
const loadingStatus = ref<UniLoadMoreStatus>('more')

/**
 * 分页获取活动
 */
const getPagedActivity = async () => {
  const { data } = await getPagedActivityService(pagedParams.value)
  total.value = data.total
  if (Array.isArray(data.item)) {
    dynamic.value = dynamic.value ? dynamic.value.concat(data.item) : data.item
  }
}

/**
 * 计算最大页码值
 */
const maxPageNum = computed(() => {
  return Math.ceil(total.value / pagedParams.value.pageSize)
})

/**
 * 加载更多
 */
const onLoadMore = async () => {
  // 判断是否已超出最大页码值
  if (pagedParams.value.pageNum >= maxPageNum.value) {
    loadingStatus.value = 'noMore'
    return showSimpleToast(NO_MORE_DATA)
  }

  // 让页码自增加一
  pagedParams.value.pageNum++

  loadingStatus.value = 'loading'

  await getPagedActivity()

  loadingStatus.value = 'more'
}

onLoad(() => {
  getPagedActivity()
})

onShow(() => {
  dynamic.value = []
  pagedParams.value = {
    pageNum: 1,
    pageSize: 5,
  }
  getPagedActivity()
})
</script>

<template>
  <!-- 自定义头部导航栏 -->
  <hope-nav-bar :title="PageTitle.DYNAMIC" />
  <scroll-view
    lower-threshold="50" upper-threshold="50" scroll-y class="scroll-view" :style="{
      height: `${contentAreaHeight - tabBarHeight}px`,
    }" @scrolltolower="onLoadMore"
  >
    <!-- 顶部操作栏 包括 搜索栏以及导航项 -->
    <hope-top-actions :navigate-item="NavigateItem.DYNAMIC" />
    <!-- 动态列表容器 -->
    <view class="dynamic-container">
      <uni-title type="h3" :title="PageTitle.DYNAMIC" align="center" />
      <template v-if="dynamic.length > 0">
        <!-- 动态列表 -->
        <view v-for="item in dynamic" :key="item.id" class="dynamic-item">
          <!-- 动态项组件 -->
          <hope-dynamic :dynamic="item" />
        </view>
        <uni-load-more icon-type="circle" :status="loadingStatus" />
      </template>
      <template v-else>
        <view v-for="item in 4" :key="item" class="dynamic-item">
          <skeleton />
        </view>
      </template>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
.dynamic {
  &-container {
    display: flex;
    gap: 20rpx;
    flex-direction: column;
    margin-top: 30rpx;
    padding: 30rpx;

    background-color: $color-white;
    border-top-left-radius: $border-radius-base;
    border-top-right-radius: $border-radius-base;

    &-title {
      text-align: center;
    }
  }

  &-item {
    margin-bottom: 30rpx;
  }
}
</style>
